<!-- 开通直播 -->
<template>
  <div class='open-live'>
    <div class="loge"></div>
    <div class="text">你好，欢迎加入视频直播，开播前请仔细阅读以下资料！</div>
    <div class="shell">
      <div>【开播守则】</div>
      <div>【查看直播操作教程】</div>
    </div>
    <div class="container">
      <div class="content"></div>
    </div>
    <div class="table">
      <div class="instructions">您的店铺满足以下条件，可直接加入直播</div>
      <rich-text :nodes="list"></rich-text>
    </div>
    <div class="duration">
      <div class="duration-shell" v-for="(item,index) in lists" @click="choice(index)" :key="index">
        <div class="month">3个月</div>
        <div v-if="index<=1" class="price">
          <span class="price-symbol">￥</span>
          <span class="price-month">12</span>
          <span class="price-text">月</span>
        </div>
        <div v-if="index>1" class="price">3个月起购</div>
        <div class="discount">7.5折</div>
      </div>
    </div>
    <div class="line"></div>
    <div class="recognition">
      <radio color="#4673f7" @click="ischecked" :checked="checked" />
      <div class="agreement">【支付协议】</div>
    </div>
    <div class="shell-botton">
      <div class="botton">开通直播</div>
    </div>
    <div class="bounced" :class="{'onbounce':choose}">
      <div v-if="choose" class="determine" @click="determine">确定</div>
      <scroll-view v-if="choose" class="bounced-shell" scroll-y='true'>
        <!-- <div class="wicket"></div> -->
        <div class="emptys"></div>
        <div class="item" :class="index === open?'items':''" v-for="(item,index) in month" :key="index"
          @click="select(index,item)">
          <div>{{item}}
            <span class="discount">7.5折</span>
          </div>
        </div>
        <div class="empty"></div>
      </scroll-view>
    </div>
  </div>
</template>

<script>

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  // 接受父组件的传值
  props: {},

  data () {
    // 这里存放数据
    return {
      list: [{
        name: 'ul',
        children: [
          {
            name: 'li',
            attrs: {
              style: 'height: 16.5px;padding: 5px 0 5px 0;font-size: 12px;px ;font-family: PingFang SC, PingFang SC-Regular;font-weight: 400;text-align: left;color: #222222; '
            },
            children: [{
              type: 'text',
              text: '店铺交易额大于5000.00元'
            }]
          }, {
            name: 'li',
            attrs: {
              style: 'height: 16.5px;padding: 5px 0 5px 0;font-size: 12px;px ;font-family: PingFang SC, PingFang SC-Regular;font-weight: 400;text-align: left;color: #222222; '
            },
            children: [{
              type: 'text',
              text: '注册时间大于30天'
            }]
          }, {
            name: 'li',
            attrs: {
              style: 'height: 16.5px;padding: 5px 0 5px 0;font-size: 12px;px ;font-family: PingFang SC, PingFang SC-Regular;font-weight: 400;text-align: left;color: #222222; '
            },
            children: [{
              type: 'text',
              text: '店铺会员数大于300人'
            }]
          }
        ]
      }],
      checked: false,
      choose: false,
      open: 0,
      arry: [1, 2, 3],
      lists: [1, 2, 3],
      // array: ['1个月', '2个月', '3个月', '4个月', '5个月', '6个月', '7个月', '8个月', '9个月', '10个月', '11个月', '12个月'],
      month: ['1个月', '2个月', '3个月', '4个月', '5个月', '6个月', '7个月', '8个月']
    }
  },
  // 监听属性 类似于data概念
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 协议开关
    ischecked () {
      this.checked = !this.checked
    },
    // 请选择
    choice (index) {
      if (index > 1) {
        this.choose = true
        console.log(1)
      }
    },
    determine () {
      this.choose = false
    },
    select (index, item) {
      this.open = index
      console.log(item)
    }
    // aaaa (index) {
    //   if (index >= 1) {
    //     this.choose = true
    //   }
    // }
    // bbb (value) {
    //   console.log(value)
    //   this.month = this.array.slice(value)
    //   // console.log(this.month)
    // }

    // goback () {
    //   this.choose = false
    //   console.log(1)
    // }
  },
  // onShow () {
  //   this.bbb()
  // },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
  },
  // 生命周期 - 创建之前
  beforeCreate () { },
  // 生命周期 - 挂载之前
  beforeMount () { },
  // 生命周期 - 更新之前
  beforeUpdate () { },
  // 生命周期 - 更新之后
  updated () { },
  // 生命周期 - 销毁完成
  destroyed () { },
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated () { }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.open-live {
  .loge {
    width: 100vw;
    height: 200px;
    background: yellow;
  }
  .text {
    height: 18.5px;
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #050505;
    margin: 10.5px 16px;
  }
  .shell {
    display: flex;
    font-size: 12px;
    height: 16.5px;
    line-height: 16.5px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #4673f7;
    margin: 0px 10px;
  }
  .container {
    display: flex;
    justify-content: center;
    padding: 14.5px 0 21.5px 0;
    .content {
      width: 72%;
      height: 25px;
      background-color: yellow;
    }
  }
  .table {
    margin: 0 15px;
    height: 125px;
    background: #e8ecf8;
    .instructions {
      font-size: 13px;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: left;
      color: #4673f7;
      padding: 8.5px 0 0 7px;
    }
  }
  .recognition {
    height: 66px;
    display: flex;
    align-items: center;
    margin: 11px 0 0 13px;
    radio {
      transform: scale(0.7);
    }
    .agreement {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #4673f7;
    }
  }
  .shell-botton {
    height: 175px;
    background: #f2f3f7;
    display: flex;
    align-items: center;
    justify-content: center;
    .botton {
      width: 92%;
      height: 50px;
      background: #4673f7;
      border-radius: 5px;
      font-size: 18px;
      line-height: 50px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
    }
  }
  .duration {
    display: flex;
    justify-content: space-around;
    padding: 20px 0 30px 0;
    .duration-shell {
      width: 88px;
      height: 88px;
      background: #ffffff;
      border: 1px solid #dddddd;
      border-radius: 3px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .month {
        height: 17px;
        line-height: 17px;
        font-size: 12px;
        text-align: center;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #222222;
      }
      .price {
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        text-align: center;
        color: #4673f7;
        .price-symbol {
          font-size: 12px;
        }
        .price-month {
          font-size: 18px;
        }
        .price-text {
          font-size: 12px;
        }
      }
      .discount {
        position: absolute;
        top: -9.5px;
        right: -0.5px;
        width: 29px;
        height: 19px;
        background: #4673f7;
        border-radius: 2px;
        line-height: 19px;
        font-size: 10px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
      }
    }
  }
  .line {
    margin: 0 16px;
    height: 1px;
    border: 1px solid #efefef;
  }
  .bounced {
    transition-property: height;
    transition-duration: 1s;
    height: 0px;
  }
  .onbounce {
    height: 180px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    z-index: 0;
    .determine {
      position: absolute;
      top: 15px;
      right: 22px;
      width: 30px;
      height: 21px;
      line-height: 21px;
      font-size: 15px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #4673f7;
    }
    .bounced-shell {
      margin-top: 40px;
      height: 100%;
      width: 100%;
      // .wicket {
      //   position: fixed;
      //   top: 50%;
      //   left: 0;
      //   width: 100%;
      //   height: 50px;
      //   margin-top: -25px;
      //   background-color: yellow;
      // }
      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        background: #fff;
        text-align: center;
        .discount {
          margin-left: 5px;
          height: 17px;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
          color: #4673f7;
        }
      }
      .items {
        background: #f2f3f7;
      }
      .emptys {
        width: 100%;
        height: 64px;
      }
      .empty {
        width: 100%;
        height: 93px;
      }
    }
  }
}
</style>